<template>
	<view class="login-main">
		<view class="login-logo">
			<image :src="imageUrls(initInfo.logo)" mode="widthFix" style="width: 200rpx; border-radius: 50%"></image>
			<view class="logo_title">御大夫</view>
		</view>

		<view class="login-btn">
			<button type="primary" class="loginBtnSty" @click="getPhoneNumber" style="background-color: #e43927">授权一键登录</button>
		</view>

		<view class="login-privacyAgreement">
			<view class="" style="margin-right: 6rpx" @click="getIsAuth">
				<uni-icons type="checkbox-filled" size="16" color="#e43927" v-if="isAuth"></uni-icons>
				<uni-icons type="circle" size="16" color="#999" v-else></uni-icons>
			</view>
			<view class="" style="line-height: 1.5">
				若手机号未注册将进入注册流程,我已阅读并接受
				<text class="textColor" @click="agreementOpen('service_agreement')">《用户服务协议》</text>
				及
				<text class="textColor" @click="agreementOpen('privacy_policy')">《隐私协议》</text>
			</view>
		</view>

		<view class="logoMain-footer" :style="bottomStyle">
			<view class="footer-title">
				<view class="zw"></view>
				<text style="padding: 0px 10px">其他登录方式</text>
				<view class="zw"></view>
			</view>
			<view class="footer-loginOption">
				<view class="loginOption-item">
					<uni-icons type="weixin" size="28" color="#666" style="margin-bottom: 4px"></uni-icons>
					<text>微信登录</text>
				</view>
				<view class="loginOption-item">
					<uni-icons type="phone-filled" size="28" color="#666" style="margin-bottom: 4px"></uni-icons>
					<text>手机号登录</text>
				</view>
			</view>
		</view>

		<!-- 协议 -->
		<u-popup :show="isShow" @close="getClose" :round="10" mode="bottom" :closeable="true">
			<view class="agreement-main">
				<view class="agreement-header">
					{{ agreementType == 'service_agreement' ? '用户服务协议' : '隐私协议' }}
				</view>
				<view class="agreement-content" v-if="agreementType == 'privacy_policy'" v-html="initInfo.privacy_policy"></view>
				<view class="agreement-content" v-if="agreementType == 'service_agreement'" v-html="initInfo.service_agreement"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { userLogin } from '../../api/home/index.js';
import { imageUrl } from '../../utils/tools.js';
export default {
	data() {
		return {
			isAuth: false,
			isShow: false,
			agreementType: '',
			initInfo: null,
			InviteId: ''
		};
	},
	onLoad(option) {
		const { id } = option;
		if (id) {
			this.InviteId = id;
		} else {
			const scene = option.scene;
			const sceneInfo = decodeURIComponent(scene);
			this.InviteId = sceneInfo.split('=')[1];
		}
	},
	onShow() {
		let storeInfo = this.$store.state.commInitInfo;
		this.initInfo = storeInfo;
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	methods: {
		// 获取登录Code
		getLoginCode() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			uni.login({
				provider: 'weixin',
				success: async (res) => {
					// #ifdef APP
					const resQurey = {
						code: 2
					};
					// #endif

					// #ifdef MP-WEIXIN
					const resQurey = {
						code: res.code
					};
					if (this.InviteId) {
						resQurey.invite_id = this.InviteId;
					}
					// #endif

					const resData = await userLogin(resQurey);
					// token
					uni.setStorageSync('token', resData.data.token);

					// 用户数据
					this.$store.dispatch('getuserInfoAsync', {
						avatar: resData.data.avatar,
						nickname: resData.data.nickname,
						mobile: resData.data.mobile,
						idcard: resData.data.idcard,
						user_id:resData.data.user_id
					});

					// 用户数据
					uni.setStorageSync('userInfo', {
						avatar: resData.data.avatar,
						nickname: resData.data.nickname,
						mobile: resData.data.mobile,
						idcard: resData.data.idcard,
						user_id:resData.data.user_id
					});

					uni.hideLoading();

					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/nationwideDelivery/nationwideDelivery'
						});
					}, 500);
				},
				fail(err) {
					console.log(err);
					uni.showToast({
						title: err.errMsg,
						icon: 'none'
					});
				}
			});
		},

		// 登录
		getPhoneNumber() {
			if (!this.isAuth) {
				return uni.showToast({
					title: '请勾选协议',
					icon: 'none'
				});
			} else {
				this.getLoginCode();
			}
		},

		imageUrls(url) {
			return imageUrl(url);
		},

		// 关闭协议
		getClose() {
			this.isShow = false;
		},

		// 隐私协议
		agreementOpen(type) {
			this.isShow = true;
			this.agreementType = type;
		},

		getIsAuth() {
			this.isAuth = !this.isAuth;
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
	height: 100%;
}
</style>

<style scoped lang="scss">
.login-main {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	.login-logo {
		margin: 170rpx 0px 140rpx 0px;
		.logo_title {
			text-align: center;
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #444;
			font-weight: bold;
		}
	}

	.login-btn {
		margin: 50rpx 0px 30rpx 0px;
		box-sizing: border-box;
		padding: 0px 40rpx;
		width: 100%;
		.loginBtnSty {
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80rpx;
			border-radius: 80rpx;
			font-size: 28rpx;
			width: 100%;
		}
	}

	.login-privacyAgreement {
		font-size: 24rpx;
		color: #999;
		box-sizing: border-box;
		padding: 0px 60rpx;
		display: flex;
		justify-content: flex-start;
		.textColor {
			color: #444;
		}
	}

	.agreement-main {
		.agreement-header {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #444;
		}
		.agreement-content {
			max-height: 60vh;
			overflow-y: scroll;
			box-sizing: border-box;
			padding: 20rpx;
			font-size: 26rpx;
			color: #444;
		}
	}

	.logoMain-footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		.footer-title {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 26rpx;
			color: #dcdcdc;
			display: flex;
			align-items: center;
			justify-content: center;
			.zw {
				width: 200rpx;
				height: 1px;
				background-color: #dcdcdc;
			}
		}

		.footer-loginOption {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 20px;
			.loginOption-item {
				font-size: 24rpx;
				color: #999;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>
